<template>
  <div class="document">
    <div class="banner">
      <div class="Box">
        <span
          ><div id="u423"></div>
          新建居民档案</span
        >
        <el-divider />
      </div>

      <p>居民信息</p>

      <!-- 第一排 -->
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="formInline.user2" placeholder="请输入" size="large" />
          </el-form-item>

          <el-form-item label="身份证号码">
            <el-input v-model="formInline.user3" placeholder="请输入" size="large" />
          </el-form-item>

          <el-form-item label="性别">
            <el-select
              v-model="formInline.value1"
              class="m-2"
              placeholder="请选择"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第二排 -->
      <div></div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="手机号码">
          <el-input
            v-model="formInline.user"
            placeholder="居民登录账号正确填写"
            size="large"
          />
        </el-form-item>

        <el-form-item label="现居地">
          <el-input v-model="formInline.user1" placeholder="请输入" size="large" />
        </el-form-item>

        <el-form-item label="居民标签">
          <el-select
            v-model="formInline.value11"
            class="m-2"
            placeholder="请选择"
            size="large"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 第三排 -->
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="出生年月">
            <div class="demo-date-picker">
              <el-date-picker
                v-model="formInline.value"
                type="date"
                placeholder="选择日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              >
                <template #default="cell">
                  <div class="cell" :class="{ current: cell.isCurrent }">
                    <span class="text">{{ cell.text }}</span>
                    <span v-if="isHoliday(cell)" class="holiday" />
                  </div>
                </template>
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="输入密码">
            <el-input
              v-model="formInline.input"
              type="password"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 分割线 -->
      <el-divider />

      <!-- 第四排 -->
      <div class="btn">
        <el-row class="mb-4">
          <el-button type="primary" :plain="true" @click="open2">保存</el-button>
          <el-button @click="go" type="primary">完善居民档案</el-button>
          <el-button @click="gg" type="primary">立即签约</el-button>
          <el-button @click="back" plain>返回</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import{he} from '../../api/user'
import { useRouter } from "vue-router";
import { ref } from "vue";
import { reactive } from "vue";
import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue";
import { userInfo } from "os";
import { ElMessage } from 'element-plus'





// 点击跳窗
const open2 = () => {
  ElMessage({
    showClose: true,
    message: '保存成功.',
    type: 'success',
  })
}

// 跳转至注册页面
const router = useRouter();
const go = () => {
  router.push("/pei");
};
const back = () => {
  router.push("/ha");
};
const gg = () => {
  router.push("/recontract/edit");
};

// 性别
// const value1 = ref('')
const options = [
  {
    value: "男",
    label: "",
  },
  {
    value: "女",
    label: "",
  },
];
//居民标签
// const value11 = ref('')
const options1 = [
  {
    value: "慢病护理",
    label: "",
  },
  {
    value: "高血压",
    label: "",
  },
  {
    value: "高血糖",
    label: "",
  },
];
// 出生年月
// const value = ref('2021-10-29')
const holidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
];

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format("YYYY-MM-DD"));
};

// 输入框
const formInline = reactive({
  user: "",
  user1: "",
  user2: "",
  user3: "",
  region: "",
  input: "",
  value: "",
  value1: "",
  value11: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style scoped>
.document {
  width: 100%;
  background-color: rgb(242, 247, 251);
}
.banner {
  margin: 0 auto;
  width: 920px;
  background-color: rgb(255, 255, 255);
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

#u423 {
  border-width: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  float: left;
  margin-left: 18px;
  margin-right: 18px;
}

.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}
.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.cell.current .text {
  background: #626aef;
  color: #fff;
}
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
